import React from 'react';
import { observer } from 'mobx-react';
import { WeaRightMenu, WeaLocaleProvider, WeaDialog } from 'ecCom';
import BatchAddStore from '../../../stores/list/BatchAddStore';
import MobxTable from '../../mobx-table';
import NoRightPage from '../../../pages/no-right';
import $ from 'jquery';
import { Button } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

export interface BatchAddProps {
    batchAddStore: BatchAddStore
}

@observer
export class BatchAdd extends React.Component<BatchAddProps, any> {
    constructor(props) {
        super(props);
    }

    getScroll = () => {
        const { batchAddStore } = this.props;
        let width = 0;
        let heigh = document.body.offsetHeight-48-42-36-61-100;        
        batchAddStore.editTableStore.columns.map(column => {
            if (column.width) {
                if (typeof column.width === 'string') {
                    if (column.width.indexOf('%') > -1) {
                        width += document.documentElement.clientWidth * parseFloat(column.width.replace('%', ''))
                    } else {
                        width += parseFloat(column.width);
                    }
                } else if (typeof column.width === 'number') {
                    width += column.width;
                }
            } else {
                width += 100;
            }
        })
        return {
            x: width + 100,
            y: heigh
        }
    }

    rightMenuClick = (key) => {
        const { batchAddStore } = this.props;
        if (key == 'save') {
            batchAddStore.save();
            batchAddStore.isButtonClick = false;
        }
    }

    componentDidUpdate() {
        const { batchAddStore } = this.props;
        if (batchAddStore.visible) {
            if ($('.cube-list-batchadd')[0]) {
                if ($($('.cube-list-batchadd')[0]).find('.cube-table-body')[0]) {
                    const headerh = $('.cube-list-batchadd .cube-table-header').height() || 0;
                    $($('.cube-list-batchadd')[0]).find('.cube-table-body')[0].style.maxHeight = (document.body.offsetHeight - 262 - headerh) + 'px';
                }
            }
        }
    }

    del = () => {
        const { batchAddStore } = this.props;
        if (batchAddStore.editTableStore.selectedRowKeys.length > 0) {
            batchAddStore.deleteData();
        }
    }

    copy = () => {
        const { batchAddStore } = this.props;
        if (batchAddStore.editTableStore.selectedRowKeys.length > 0) {
            batchAddStore.copyData();
        }
    }

    render() {
        const { batchAddStore } = this.props;
        const { isfrontmultlang } = batchAddStore;
        const selectdStyle = { fontSize: '20px', 'color': '#2db7f5', marginRight: '10px', cursor: 'pointer' };
        let selectdStyle1 = { fontSize: '20px', 'color': '#d8d8d8', marginRight: '10px', cursor: 'pointer' };

        if (batchAddStore.editTableStore.selectedRowKeys.length > 0) {
            selectdStyle1 = selectdStyle;
        }
        const datalength = batchAddStore.editTableStore.isInit ? batchAddStore.editTableStore.form.$(`tableForm`).values().length : 0;
        const MenuDatas = [{
            key: 'save',
            disabled: datalength == 0 || !batchAddStore.isButtonClick,
            icon: <i className='icon-coms-Save-as' />,
            //content: getLabel(385215, '批量保存'),
            content: batchAddStore.bathAddExpendname,
        }];
        return batchAddStore.hasRight ? <div style={{height:'100%'}}>
            <WeaRightMenu datas={MenuDatas} onClick={this.rightMenuClick}>
                <div style={{ padding: '10px', textAlign: 'right' }}>
                    <span title={getLabel(611, '添加')} onClick={ batchAddStore.addNewData} style={selectdStyle} className="icon-coms-Add-to-hot" />
                    <span title={getLabel(91, '删除')} onClick={this.del} style={selectdStyle1} className="icon-coms-form-delete-hot" />
                    <span title={getLabel(77, '复制')} onClick={this.copy} style={selectdStyle1} className="icon-coms-copy-hot" />
                </div>
                { 
                    batchAddStore.editTableStore.isInit && <MobxTable
                        tableStore={batchAddStore.editTableStore}
                        scroll={this.getScroll()}
                        pagination={false}
                        isRowSelection={true}
                        isNoSwitchEditStatus={true}
                        isfrontmultlang={isfrontmultlang}
                    />
                }
            </WeaRightMenu>
        </div> : <NoRightPage />
    }
}

@observer
export class BatchAddDialog extends React.Component<BatchAddProps, any> {

    state = {
        iconLoading: false,
    };
    enterIconLoading = () => {
        this.setState({ iconLoading: true });
    };

    componentWillMount() {
        this.setState({ iconLoading: false });
    }

    bathAddExpendnameClick = () => {
        const { batchAddStore } = this.props;
        if (batchAddStore.isButtonClick == false) {
            return;
        }
        this.enterIconLoading();
        batchAddStore.save(() => {
            setTimeout(() => {
                this.setState({ iconLoading: false });
            }, 1000);
        });
    }

    cancel = () =>{
        const { batchAddStore } = this.props;
        batchAddStore.update({visible:false})
    }

    render() {
        const { batchAddStore } = this.props;
        return <WeaDialog 
                className="cube-list-batchadd"
                title={getLabel(500091, '批量新增', 'label')}
                iconBgcolor={batchAddStore.iconInfo.iconBg || "#96358a"}
                icon={batchAddStore.iconInfo.icon || 'icon-coms-ModelingEngine'}
                iconFontColor={batchAddStore.iconInfo.iconColor || "#fff"}
                onCancel={this.cancel}
                style={{ width: document.body.offsetWidth - 300, height: document.body.offsetHeight - 220 }}
                buttons={[
                    (<Button loading={this.state.iconLoading} type="primary" onClick={this.bathAddExpendnameClick}>{batchAddStore.bathAddExpendname}</Button>),
                    (<Button type="ghost"  onClick={this.cancel}>{getLabel(201, '取消', 'label')}</Button>)
                ]}
                visible={batchAddStore.visible}
            >
            {/* <Spin spinning={batchAddStore.loading} > */}
                <BatchAdd {...this.props}></BatchAdd>
            {/* </Spin> */}
        </WeaDialog>
    }
}
